<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <link type="text/css" href="resources/css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
        <link type="text/css" href="resources/css/carpool.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" media="screen" href="resources/css/jquery.validate.password.css" />

        <title>Carpool</title>

        <script type="text/javascript" src="resources/js/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="resources/js/jquery-ui-1.7.1.custom.min.js"></script>
        <script type="text/javascript" src="resources/js/jquery.maskedinput-1.2.2.js"></script>
        <script type="text/javascript" src="resources/js/jquery.validate.js"></script>
        <script type="text/javascript" src="resources/js/jquery.validate.password.js"></script>
        <script type="text/javascript" src="resources/js/jquery.simplemodal-1.2.3.js"></script>
        <script type="text/javascript" src="resources/js/carpool.js"></script>


        <style type="text/css">

                                   form {
                                       /*background:#fff;*/
                                       padding:1em;
                                       /*border:1px solid #eee;*/
                                   }
                                   .personal {
                                       background:url(/images/user.gif) no-repeat 95% 1em;
                                   }
                                   .account {
                                       background:url(/images/email2.gif) no-repeat 95% 1em;
                                   }

                                   .contact {
                                       background:url(/images/email2.gif) no-repeat 95% 1em;
                                   }



                                   fieldset div {
                                       margin:0.3em 0;
                                       clear:both;
                                   }
                                   form {
                                       margin:1em;
                                       width:90%;
                                   }
                                   label {
                                       float:left;
                                       width:10em;
                                       text-align:right;
                                       margin-right:1em;
                                   }
                                   legend {
                                       color:#0b77b7;
                                       font-size:1.2em;
                                   }
                                   legend span {
                                       width:10em;
                                       text-align:right;
                                   }
                                   input, textarea {
                                       padding:0.15em;
                                       width:20em;
                                       border:1px solid #ddd;
                                       background:#fafafa;
                                       font:bold 0.95em Arial, Helvetica, sans-serif;
                                       border-width: 0.5px; border-style: dotted;
                                       /*-moz-border-radius:0.4em;
                                       -khtml-border-radius:0.4em;*/
                                   }


                                   input:hover, input:focus {
                                       border-color:#c5c5c5;
                                       background:#f6f6f6;
                                   }
                                   fieldset {
                                       border:1px solid #ddd;
                                       padding:0 0.5em 0.5em;
                                   }

                                   .radio, .date {
                                       position:relative;
                                   }
                                   .radio fieldset, .date fieldset {
                                       border:none;
                                       width:auto;
                                       padding:1px 0 0 11em;
                                   }
                                   .radio legend, .date legend {
                                       font-size:1em;
                                       color:#000;
                                   }
                                   .radio legend span, .date legend span {
                                       position:absolute;
                                       left:0;
                                       top:0.3em;
                                       width:10em;
                                       display:block;
                                   }
                                   .radio label, .radio input {
                                       vertical-align:middle;
                                       display:inline;
                                       float:none;
                                       width:auto;
                                       background:none;
                                       border:none;
                                   }
                                   .radio div {
                                       float:left;
                                       white-space:nowrap;
                                       clear:none;
                                   }

                                   .email {
                                       width:14em;
                                   }

                                   .address {
                                       width: 90%;
                                   }

                                   input.default {
                                       color:#bbb;
                                   }

                                   #proceed {
                                       width:25px;
                                       height:25px;
                                       position:relative;
                                       margin-top: -25px;
                                       text-indent:-9999px;
                                       overflow:hidden;
                                       border:0;
                                       background:url(resources/images/login_btn.gif) no-repeat 0 0;
                                       display:block;
                                       float:right;
                                       cursor:pointer !important; cursor:auto;
                                   }

                                   #proceed:hover {
                                       background:url(resources/images/login_btn_over.gif) no-repeat 0 0;
                                   }

                                   #submitbtn {
                                       width: 120px;

                                   }
                                   #submit-go {
                                       margin-top:1em;
                                       width:69px;
                                       height:26px;
                                       text-indent:-9999px;
                                       overflow:hidden;
                                       border:0;
                                       background:url(resources/images/submit_btn.gif) no-repeat 0 0;
                                       display:block;
                                       cursor:pointer !important; cursor:auto;
                                   }
                                   #submit-go:hover {
                                       background:url(resources/images/submit_over.gif) no-repeat 0 0;
                                   }

#formreg #termswrap {
  float: left;
}

#formreg #terms {
  vertical-align: middle;
  float: left;
  display: block;
  margin-right: 5px;
  margin-top: -14px;
}

#formreg #lterms {
  font-weight: normal;
  vertical-align: middle;
  float: left;
  display: block;
  width: 350px;
  white-space: normal;
}
        </style>

        <script type="text/javascript">

            $(document).ready( function() {
                $("#reg_numero").mask("9999999999");
                //$("#birth").datepicker({ dateFormat: 'yy-mm-dd' });
                $("#formreg").validate( {

                    rules: {
                        rusername: {
                            required: true,
                            minlength: 4,
                            remote: {
                                url: "UserServlet",
                                type: "post",
                                data: {
                                    operation: "check_username",
                                    username: $("#username").val()
                                  }
                            }
                        },
                        rpassword: {
                            required: true,
                            minlength: 5
                            //password: "#rusername"
                        },
                        rpassword2: {
                            required: true,
                            equalTo: "#rpassword"
                        },
                        terms: {
                            required: true
                        }
                    },
                    messages: {
                        rusername: {
                            required: "Introduza o nome de utilizador",
                            minlength: jQuery.format("Minimo {0} caracteres"),
                            remote: jQuery.format("{0} ja em uso.")
                        },
                        rpassword: {
                            required: "Introduza uma palavra passe",
                            minlength: jQuery.format("Minimo {0} caracteres")
                        },
                        rpassword2: {
                            required: "Repita a sua palavra passe",
                            minlength: jQuery.format("Minimo {0} caracteres"),
                            equalTo: "Introduza a mesma palavra passe"
                        },
                        terms: {
                            required: "Por favor leia e aceite os termos do servico"
                        }
                    },

                    // the errorPlacement has to take the table layout into account
                    errorPlacement: function(error, element) {
                        error.insertAfter(element);
                        //error.prependTo( element.parent().next() );
                        //$(element).attr("class", "");
                    }
                    // specifying a submitHandler prevents the default submit, good for the demo
                    //submitHandler: function() {
                    //   alert("submitted!");
                    //},
                    // set this class to error-labels to indicate valid fields
                    //success: function(label) {
                    //    // set &nbsp; as text for IE
                    //    label.html("&nbsp;").addClass("_checked");
                    //}

                });
            });

            function validateAndsubmitReg() {
                if($('#formreg').valid()) {
                    submitReg();
                }
            }
        </script>
    </head>
    <body>
        <div id="reg_form" style="overflow: auto; height: 430px; width: 520px; border: 2px; background:transparent; position: absolute; left: 210px; top: 50px;">
            <h1>Registo</h1>
            <form id="formreg">
                <p>Por favor, preencha o formulário.</p>
                <fieldset class="identification">
                    <legend>Identificação (passo 1/4)</legend>
                    <div>
                        <label for="reg_numero">Número de aluno</label> <input type="text" id="reg_numero" name="reg_numero">
                        <button type="button" id="proceed" onclick="openRegister(2)"></button>
                        <div class="warning" id="reg_not_numero" style="display: none;"></div>
                    </div>
                </fieldset>

                <fieldset class="personal" id="reg_step2" style="display:none;">
                    <legend>Dados pessoais (passo 2/4)</legend>
                    <div>
                        <label for="firstname">Primeiro nome</label> <input disabled="true" type="text" id="firstname" name="firstname">
                    </div>
                    <div>
                        <label for="lastname">Último nome</label> <input disabled="true" type="text" id="lastname" name="lastname">
                    </div>
                    <div class="radio">
                        <fieldset>
                            <legend><span>Sexo</span></legend>
                            <div>
                                <input disabled="true" type="radio" id="male" name="gender" value="M"> <label for="male">masculino</label>

                            </div>
                            <div>
                                <input disabled="true" type="radio" id="female" name="gender" value="F"> <label for="female">feminino</label>
                            </div>
                        </fieldset>
                    </div>

                    <div>
                        <label for="birth">Data de nascimento</label> <input disabled="true" type="text" id="birth" name="birth">
                    </div>

                    <div>
                        <label for="address">Morada</label> <textarea disabled="true" id="address" name="address"></textarea>
                    </div>
                    <div>
                        <label for="email">Email</label> <input disabled="true" type="text" id="email" name="email" class="email">
                        <button type="button" id="proceed" onclick="openRegister(3)"></button>
                    </div>
                </fieldset>

                <fieldset class="account" id="reg_step3" style="display:none;">
                    <legend>Detalhes de conta (passo 3/4)</legend>

                    <div>
                        <label for="rusername">Nome de utilizador</label> <input class="" type="text" id="rusername" name="rusername" style="width: 14em;">
                    </div>
                    <div>
                        <label for="rpassword">Palavra passe</label> <input type="password" id="rpassword" name="rpassword" style="width: 14em;">
                    </div>
<!--
                            <div class="password-meter">
                                <div class="password-meter-message"> </div>
                                <div class="password-meter-bg">
                                    <div class="password-meter-bar"></div>
                                </div>
                            </div>
-->
                    <div>
                        <label for="rpassword2">Repita a palavra passe</label> <input type="password" id="rpassword2" name="rpassword2" style="width: 14em;">
                            <br/><br/>
                        <button type="button" id="proceed" style="margin-top: 0px;" onclick="openRegister(4)"></button>
                    </div>

                </fieldset>


                <fieldset class="personal" id="reg_step4" style="display:none;">
                    <legend>Termos do servico (passo 4/4)</legend>

                    <div id="termswrap">
                        <label id="lterms" for="terms">Li e aceito os termos de uso.</label>
			  			<input id="terms" name="terms" type="checkbox">
			           
		            </div>

  <!--
                    <div>
                        <label for="reg_agree" id="lreg_agree">Li e concordo com os termos do serviço</label>
                        <input id="reg_agree" type="checkbox" >
                      
                <label for="reg_cars" id="lreg_cars">Associar automovel</label>
                <input id="reg_cars" type="checkbox"><p>Associar automovel</p>
               
                    </div>
                     -->
                    <br/><br/>
                    <div style="text-align:center;">
                    <input type="submit" id="submitbtn" onclick="validateAndsubmitReg()" value="Submeter"/>
                    </div>
                </fieldset>

            </form>
        </div>
    </body>
</html>
